﻿<div class="layui-card" id="lg-PlanAdd">
    <div class="layui-card-header">
        <i class="fa fa-home fa-fw"></i>招生计划发布
        <div class="f-r">
            <button class="layui-btn layui-btn-primary layui-btn-sm" v-on:click="back()"><i class="fa fa-mail-reply fa-fw"></i>返回</button>
        </div>
    </div>
    <div class="layui-card-body" id="">
        <div class="layui-form-item">
            <form class="layui-form layui-form-pane" action="" id="fm_AddPlan" lay-filter="fm_AddPlan">
                <div class="layui-form-item">
                    <label class="layui-form-label"><i style="color:#f00">*</i>学年</label>
                    <div class="layui-input-block">
                        <select name="Year" id="Year" lay-verify="required">
                            <option value="">请选择学年</option>
                            <option v-for="item in year" :value="item">{{item}}~{{item+1}}</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><i style="color:#f00">*</i>学期</label>
                    <div class="layui-input-block">
                        <select name="Semester" lay-verify="required">
                            <option value=""></option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><i style="color:#f00">*</i>年级</label>
                    <div class="layui-input-block">
                        <select name="GradeId" id="GradeId" lay-verify="required">
                            <option value=""></option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><i style="color:#f00">*</i>表单模版</label>
                    <div class="layui-input-block">
                        <select name="FormId" lay-verify="required">
                            <option value=""></option>
                            <option :value="item.Value" v-for="item in forms">{{item.Text}}</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><i style="color:#f00">*</i>计划名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="Title" class="layui-input" placeholder="填写计划名称" lay-verify="required" />
                    </div>
                </div>

                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">计划说明</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" class="layui-textarea" name="PlanTips"></textarea>
                    </div>
                </div>

                <div class="layui-form-item" pane>
                    <label class="layui-form-label">年龄限制</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="IsCheckAge" lay-skin="switch" lay-filter="CheckAge" lay-text="ON|OFF" value="1" data-open="#AgeDate" />
                    </div>
                </div>
                <div class="layui-form-item hide" id="AgeDate">
                    <div class="layui-inline">
                        <label class="layui-form-label">出生日期</label>
                        <div class="layui-inline" id="AgeLimit" lay-key="8">
                            <div class="layui-input-inline">
                                <input type="text" autocomplete="off" name="MinDate" id="MinDate" class="layui-input" placeholder="日期起始">
                            </div>
                            <div class="layui-form-mid">-</div>
                            <div class="layui-input-inline">
                                <input type="text" autocomplete="off" name="MaxDate" id="MaxDate" class="layui-input" placeholder="日期截止">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label"><i style="color:#f00">*</i>报名起止</label>
                        <div class="layui-inline" id="ApplyDateLimit" lay-key="9">
                            <div class="layui-input-inline">
                                <input type="text" autocomplete="off" name="StartDate" id="StartDate" class="layui-input" placeholder="开始日期" lay-verify="required">
                            </div>
                            <div class="layui-form-mid">-</div>
                            <div class="layui-input-inline">
                                <input type="text" autocomplete="off" name="EndDate" id="EndDate" class="layui-input" placeholder="结束日期" lay-verify="required">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">报名费</label>
                    <div class="layui-input-inline">
                        <input type="number" name="Fee" class="layui-input" value="0" />
                    </div>
                    <div class="layui-form-mid layui-word-aux">免费请填写0</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">权重</label>
                    <div class="layui-input-inline">
                        <input type="number" name="SortNumber" class="layui-input" value="0" lay-verify="required|number" />
                    </div>
                    <i class="fa fa-exclamation-circle lg-form-tips" aria-hidden="true" data-msg="开启后报名本计划将不再验证是否在其它计划报过名！"></i>
                </div>
                <div class="layui-form-item" pane>
                    <label class="layui-form-label">允许重复</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="IsAllowRepeat" lay-skin="switch" lay-text="ON|OFF" value="1">
                        <i class="fa fa-exclamation-circle lg-form-tips" aria-hidden="true" data-msg="开启后报名本计划将不再验证是否在其它计划报过名！"></i>
                    </div>
                </div>
                <div class="layui-form-item" pane>
                    <label class="layui-form-label">开启报名</label>
                    <div class="layui-input-inline">
                        <input type="checkbox" name="IsOpen" lay-skin="switch" lay-text="ON|OFF" value="1">
                    </div>
                    <div class="layui-form-mid layui-word-aux">开启后并非可报名，另受报名时间和人数是否已达上限等因素影响，关闭则必不可报</div>
                </div>
                <div class="layui-form-item" pane>
                    <label class="layui-form-label">受邀可报</label>
                    <div class="layui-input-inline">
                        <input type="checkbox" name="IsInvite" lay-skin="switch" lay-text="ON|OFF" value="1">
                    </div>
                    <div class="layui-form-mid layui-word-aux">开启后该计划不显示在前端，并只接受携带邀请凭证的用户报名</div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="bt_AddPlan">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
        <!-- 内容主体区域结束 -->
    </div>
</div>

<script>

    frame.createPage({
        mounted: function() {
            this.FormRander();
            this.VueRander();
        },
        methods: {
            FormRander: function() {
                var page = this;
                layui.use(['form', 'laydate'], function() {
                    var form = layui.form
                        , laydate = layui.laydate;
                    form.render();
                    laydate.render({
                        elem: '#AgeLimit'
                        //设置开始日期、日期日期的 input 选择器
                        //数组格式为 5.3.0 开始新增，之前版本直接配置 true 或任意分割字符即可
                        , range: ['#MinDate', '#MaxDate']
                    });
                    laydate.render({
                        elem: '#ApplyDateLimit'
                        //设置开始日期、日期日期的 input 选择器
                        //数组格式为 5.3.0 开始新增，之前版本直接配置 true 或任意分割字符即可
                        , range: ['#StartDate', '#EndDate']
                    });
                    form.on('switch', function(data) {
                        if (data.elem.name == "IsCheckAge") {
                            var target = $($(data.elem).data("open"))
                            if (data.elem.checked) {
                                target.removeClass("hide");
                                target.find("input").attr("lay-verify", "required");
                            } else {
                                target.addClass("hide");
                                target.find("input").removeAttr("lay-verify")
                            }
                        }
                    })
                    form.on('submit(bt_AddPlan)', function(d) {
                        var data = d.field;
                        if (!data.IsOpen) {
                            data.IsOpen = 0
                        }
                        if (!data.IsAllowRepeat) {
                            data.IsAllowRepeat = 0
                        }
                        if (data.IsInvite != 1) {
                            data.IsInvite = 0;
                        }
                        
                        lg.request({
                            url: "/api/sys/apply/AddPlan",
                            method: "post",
                            data: data,
                            success: res => {
                                if (res.code == 0) {
                                    layer.msg("添加成功！", { icon: 1 });
                                    page.vm.back();
                                } else {
                                    layer.msg(res.msg, { icon: 2 })
                                }
                            }
                        })
                        return false;
                    })
                })
            },
            VueRander: function() {
                var page = this;
                page.vm = Vue.createApp({
                    data() {
                        return {
                            year: [],
                            grade: [],
                            forms: [],
                            onUpdated: null
                        }
                    },
                    mounted: function() {
                        this.GetGrades();
                        this.GetYears();
                        this.GetForms();
                    },
                    methods: {
                        back: function() {
                            frame.Back(page.url, res => {
                                res.laytable.reload()
                            })
                        },
                        GetGrades: function() {
                            lg.request({
                                url: "/api/sys/apply/GetGradeList",
                                success: res => {
                                    if (res.code == 0 && res.data != null) {
                                        var data = this.Sort(res.data, 0, []);
                                        for (let i in data) {
                                            if (data[i].Depth > 1) {
                                                data[i].Name = lg.string.PadLeft("├ " + data[i].Name, data[i].Depth, "&nbsp")
                                            }
                                        }
                                        lg.select.fill({
                                            data: data,
                                            value: "Id",
                                            text: "Name",
                                            target: "#GradeId",
                                            callback: cb => {
                                                layui.form.render();
                                            }
                                        })
                                    }
                                }
                            })
                        },
                        Sort: function(data, fid, arr) {
                            var that = this
                            var grades = data.filter(d => d.FatherId == fid)
                            if (grades.length > 0) {
                                for (let i in grades) {
                                    var obj = grades[i];
                                    arr.push(obj);
                                    that.Sort(data, obj.Id, arr)
                                }
                            }
                            return arr;
                        },
                        GetYears: function() {
                            var date = new Date();
                            this.year.push(date.getFullYear() - 1);
                            this.year.push(date.getFullYear());
                            this.year.push(date.getFullYear() + 1);
                        },
                        GetForms: function() {
                            lg.request({
                                url: "/api/sys/apply/GetFormOptions",
                                success: res => {
                                    if (res.code == 0) {
                                        this.forms = res.data;
                                        this.onUpdated = function() {
                                            layui.form.render();
                                        }
                                    }
                                }
                            })
                        }
                    },
                    updated: function() {
                        if (typeof (this.onUpdated) == "function") {
                            this.onUpdated();
                            this.onUpdated = null;
                        }
                    }
                }).mount("#lg-PlanAdd")
            }
        },
    }).mount();
</script>